<!--
 * @Author: lihaogn
 * @Date: 2021-12-08 14:24:14
 * @LastEditTime: 2021-12-12 18:48:34
 * @LastEditor: lihaogn
 * @Description: 导出对话框
 * @FilePath: \lix-admin-vue2\src\components\common\lix-export\index.vue
-->
<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="title"
    :visible.sync="dialogVisible"
    width="420px"
    @close="handleDialogCancel"
  >
    <div v-loading="okButtonLoading">
      <el-radio-group v-model="radio" style="margin-bottom:20px;">
        <el-radio :label="0">导出当前页数据</el-radio>
        <el-radio :label="1">导出全部数据</el-radio>
      </el-radio-group>
      <el-input v-model="input" placeholder="请输入导出文件名称"></el-input>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button
        type="primary"
        :loading="okButtonLoading"
        @click="handleDialogOk"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import { dialogMixin } from '../../../mixins/dialog'
import { formatDate } from '../../../utils/common'
import { USER_RELATIONS } from './utils'

export default {
  mixins: [dialogMixin],
  props: {
    // 请求数据的方法
    request: {
      type: Function
    }
  },
  data() {
    return {
      input: '',
      radio: 0,
      defaultInput: '用户导出数据'
    }
  },
  watch: {},
  methods: {
    /**
     * @author: lihaogn
     * @Date: 2021-12-08 15:00:46
     * @description: 对话框取消（关闭）事件
     * @param {*}
     * @return {*}
     */
    handleDialogCancel() {
      this.input = ''
      this.okButtonLoading = false
      this.$emit('update:visible', false)
    },
    /**
     * @author: lihaogn
     * @Date: 2021-12-08 16:52:37
     * @description: 确认事件
     * @param {*}
     * @return {*}
     */
    async handleDialogOk() {
      this.okButtonLoading = true
      const res = await this.request(this.radio)
      let data
      if (this.radio) {
        // 用户导出-获取到全部数据
        data = this.parseData(USER_RELATIONS, res.result)
      } else {
        // 用户导出-获取到分页数据
        data = this.parseData(USER_RELATIONS, res.result.data)
      }
      const excel = await import('./Export2Excel')
      excel.export_json_to_excel({
        // excel 表头
        header: Object.keys(USER_RELATIONS),
        // excel 数据（二维数组结构）
        data,
        // 文件名称
        filename: this.input || this.defaultInput,
        // 是否自动列宽
        autoWidth: true,
        // 文件类型
        bookType: 'xlsx'
      })

      this.okButtonLoading = false
      this.dialogVisible = false
    },
    /**
     * @author: lihaogn
     * @Date: 2021-12-08 17:23:20
     * @description: 将对象数组转换成二维数组
     *   [{ username: '张三', age: 12},{},{}]  => [[’张三', 12],[],[]]
     * @param {*} headers - 表格头映射对象
     * @param {*} body - 后端返回的数据
     * @return {*}
     */
    parseData(headers, body) {
      return body.map(b => {
        return Object.keys(headers).map(key => {
          if (headers[key] == 'createdAt' || headers[key] == 'updatedAt') {
            return formatDate(b[headers[key]])
          }
          return b[headers[key]]
        })
      })
    }
  }
}
</script>

<style></style>
